<template>
  <div class="reset-password">
    <Modal v-if="modalActive" :modalMessage="modalMessage" @close-modal="closeModal"/>
    <Loading v-if="loading"/>
    <div class="form-warp">
      <form class="reset">
        <h2>重置密码</h2>
        <p style="margin-bottom: 32px;">忘记密码了吗？请输入你的邮箱。</p>
        <div class="inputs">
          <div class="input">
            <input type="text" placeholder="Email" v-model="email" />
            <Email class="icon" />
          </div>
        </div>
        <button @click.prevent="resetPassword">重置</button>
        <div class="angle"></div>
      </form>
      <div class="background"></div>
    </div>
  </div>
</template>

<script>
import Email from "../assets/Icons/envelope-regular.svg"
import Loading from '../components/Loading.vue'
import Modal from "../components/Modal.vue"
export default {
  name: "ForgotPassword",
  data() {
    return {
      email: "",
      modalActive: false,
      modalMessage: "",
      loading: null,
    };
  },
  components: {
    Email,
    Modal,
    Loading
  },
  methods: {
    resetPassword() {
      this.modalMessage = "此功能暂时不可用";
      this.loading = false;
      this.modalActive = true;
    },
    closeModal(){
      this.modalActive = !this.modalActive;
      this.email = ""
    }
  },
};
</script>

<style lang="scss" scoped>
.reset-password {
  position: relative;
  .form-wrap {
    .reset {
      h2 {
        margin-bottom: 8px;
      }
      p{
        text-align: center;
        margin-bottom: 32px;
      }
    }
  }
}
</style>